<template>
  <div class="app-container">
    <!-- <div class="header">
      <el-form :inline="true" :model="formInline" ref="ruleFormRef">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="formInline.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :icon="Search">查询</el-button>
          <el-button @click="reset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="footer">
      <div class="util">
        <el-button type="primary" @click="addHandler" v-if="auth && auth.add">
          <el-icon><Plus /></el-icon>
          新增人员
        </el-button>
        <el-button type="success" @click="router.go(-1)">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
      <div class="table-inner">
        <el-table class="table" v-loading="loading" :data="list" border>
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column prop="personnel" label="姓名" align="center">
            <template #default="scope">
              <span v-if="scope.row.personnel">{{ scope.row.personnel.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="personnel" label="联系电话" align="center">
            <template #default="scope">
              <span v-if="scope.row.personnel">{{ scope.row.personnel.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="department" label="科室" align="center" />
          <el-table-column prop="operator" label="操作" width="200px" align="center" fixed="right">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                icon="Edit"
                @click="BindDevice(scope.row)"
                v-if="auth && auth.edit"
              >
                绑定设备
              </el-button>
              <el-button
                @click="del(scope.row)"
                type="danger"
                size="small"
                icon="Delete"
                v-if="auth && auth.delete"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          v-model:pageSize="query.limit"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <UserDialog ref="userDialog" @refresh="getList()"/>
    <DeviDialog ref="deviDialog" @refresh="getList()"/>
  </div>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { nextTick, onMounted, reactive, ref } from 'vue'
import UserDialog from './components/UserDialog.vue'
import DeviDialog from './components/DeviDialog.vue'
import { roomPerso, deleteRoomPerso } from '@/api/admin'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const userDialog = ref()
const deviDialog = ref()
const loading = ref(true)
const list = ref()
const total = ref(0)
const query = reactive({
  filter: '',
  page: 1,
  limit: 10,
})
const auth = ref()

const getList = () => {
  loading.value = true
  query.filter = JSON.stringify({ room_id: route.query.roomId })
  roomPerso(query).then((res) => {
    if (res.code == 200) {
      auth.value = res.data.auth
      list.value = res.data.data
      total.value = res.data.count
    }
    loading.value = false
  })
}

const addHandler = () => {
  userDialog.value.show()
}
const BindDevice = (row) => {
  deviDialog.value.show(row)
}

const del = (row) => {
  ElMessageBox.confirm(`你确定要删除 “${row.personnel.name}” 吗?`, '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    deleteRoomPerso({
      id: row.id,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: res.data,
          message: res.msg,
          type: 'success',
        })
        getList()
      }
    })
  })
}

const changeStatus = (row) => {
  ElMessageBox.confirm(
    `确定要${!row.status ? '禁用' : '启用'} "${row.personnel.name}" 吗？`,
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      editPersonnel({
        id: row.id,
        status: row.status,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: `${!row.status ? '禁用' : '启用'}成功`,
            message: res.msg,
            type: 'success',
          })
        } else {
          if (row.status == 0) row.status = 1
          else if (row.status == 1) row.status = 0
        }
      })
    })
    .catch(() => {
      if (row.status == 0) row.status = 1
      else if (row.status == 1) row.status = 0
    })
}

const handleSizeChange = (val: number) => {
  query.page = 1
  query.limit = val
  getList()
}

const handleCurrentChange = (val: number) => {
  query.page = val
  getList()
}

getList()
</script>
<style lang="scss" scoped>
@import './index';
</style>
